import React, { useEffect, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { Table, Pagination, Spin, message } from 'antd';
import axios from 'axios';
import './MultiStockPage.scss';

const MultiStockPage = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();

  // 声明所有的 Hook（必须在函数体顶层调用）
  const [data, setData] = useState([]);
  const [totalPages, setTotalPages] = useState(286); // 或后端返回
  const [loading, setLoading] = useState(false);
  
  // 读取 token
  const token = localStorage.getItem("jwt_token");

  // 如果没有 token，则跳转到登录页面 —— 放在 useEffect 里
  useEffect(() => {
    if (!token) {
      message.error("用户未登录");
      navigate("/login");
    }
  }, [token, navigate]);

  // 如果没有 page 参数，则设置为 1
  useEffect(() => {
    if (!searchParams.get('page')) {
      setSearchParams({ page: '1' });
    }
  }, [searchParams, setSearchParams]);

  const page = parseInt(searchParams.get('page') || '1', 10);

  // 根据 page 与 token 请求数据
  useEffect(() => {
    // 如果 token 不存在，则不发送请求
    if (!token) return;
    
    const fetchStockData = async () => {
      setLoading(true);
      try {
        const res = await axios.get(`/api/ui/stocklist?page=${page}`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        if (res.data.code === 0) {
          setData(res.data.data);
        } else {
          message.error('获取数据失败: ' + res.data.message);
        }
      } catch (error) {
        message.error('请求出错');
      } finally {
        setLoading(false);
      }
    };

    fetchStockData();
  }, [page, token]);

  const columns = [
    { title: '股票代码', dataIndex: '股票代码', key: 'code' },
    { title: '股票名称', dataIndex: '股票名称', key: 'name' },
    { title: '最新价', dataIndex: '最新价', key: 'price', render: val => (val / 100).toFixed(2) },
    { title: '涨跌幅', dataIndex: '涨跌幅', key: 'percent', render: val => (val / 100).toFixed(2) + '%' },
    { title: '涨跌额', dataIndex: '涨跌额', key: 'delta', render: val => (val / 100).toFixed(2) },
    { title: '成交量', dataIndex: '成交量', key: 'volume', render: val => (val / 100).toFixed(2) + '万' },
    { title: '振幅', dataIndex: '振幅', key: 'amplitude', render: val => (val / 100).toFixed(2) + '%' },
    { title: '最高', dataIndex: '最高', key: 'high', render: val => (val / 100).toFixed(2) },
    { title: '最低', dataIndex: '最低', key: 'low', render: val => (val / 100).toFixed(2) },
    { title: '市盈率', dataIndex: '市盈率', key: 'pe', render: val => (val / 100).toFixed(2) },
    { title: '换手率', dataIndex: '换手率', key: 'turnover', render: val => (val / 100).toFixed(2) + '%' },
  ];

  return (
    <div className="multi-stock-page">
      <h2>多股行情</h2>
      <Spin spinning={loading}>
      <Table
        dataSource={data}
        columns={columns}
        rowKey={(record) => record['股票代码']}
        pagination={false}
        scroll={{ x: 'max-content' }} // 根据内容动态决定是否滚动
      />

        <Pagination
          current={page}
          pageSize={20}
          total={totalPages * 20} // 假设每页20条
          onChange={(newPage) => {
            setSearchParams({ page: newPage.toString() });
          }}
          showSizeChanger={false}
        />
      </Spin>
    </div>
  );
};

export default MultiStockPage;


